<template>
    <div class="tmpl">
        <!-- 商品详情页面 -->
        <!-- 导航栏 -->
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/goods.html">购物商城</a>
                <a href="/goods/42/1.html">商品详情</a>

            </div>
        </div>

        <!-- 商品详情 -->
        <div class="section">
            <div class="wrapper clearfix">
                <div class="wrap-box">
                    <!--页面左边-->
                    <div class="left-925">
                        <div class="goods-box clearfix">
                            <!--商品图片-->
                            <div class="pic-box">
                                <!-- 放大镜图片 -->
                                <div class="magnifier" id="magnifier1">
                                    <div class="magnifier-container">
                                        <div class="images-cover"></div>
                                        <!--当前图片显示容器-->
                                        <div class="move-view"></div>
                                        <!--跟随鼠标移动的盒子-->
                                    </div>
                                    <div class="magnifier-assembly">
                                        <div class="magnifier-btn">
                                            <span class="magnifier-btn-left">&lt;</span>
                                            <span class="magnifier-btn-right">&gt;</span>
                                        </div>
                                        <!--按钮组-->
                                        <div class="magnifier-line">
                                            <ul class="clearfix animation03">
                                                <li v-for='item in infolist.imglist'>
                                                    <div class="small-img">
                                                        <img :src="item.thumb_path" />
                                                    </div>
                                                </li>

                                            </ul>
                                        </div>
                                        <!--缩略图-->
                                    </div>
                                    <div class="magnifier-view"></div>
                                    <!--经过放大的图片显示容器-->
                                </div>
                                <!-- 放大镜图片/ -->
                            </div>
                            <!--/商品图片-->

                            <!--商品信息-->
                            <div class="goods-spec">
                                <h1 v-text="infolist.goodsinfo.title"></h1>
                                <p class="subtitle" v-text="infolist.goodsinfo.sub_title"></p>
                                <div class="spec-box">
                                    <dl>
                                        <dt>货号</dt>
                                        <dd id="commodityGoodsNo" v-text="infolist.goodsinfo.goods_no"></dd>
                                    </dl>
                                    <dl>
                                        <dt>市场价</dt>
                                        <dd>
                                            <s id="commodityMarketPrice">¥{{infolist.goodsinfo.market_price}}</s>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt>销售价</dt>
                                        <dd>
                                            <em class="price" id="commoditySellPrice">¥{{infolist.goodsinfo.sell_price}}</em>
                                        </dd>
                                    </dl>
                                </div>

                                <div class="spec-box">
                                    <dl>
                                        <dt>购买数量</dt>
                                        <dd>
                                            <div class="stock-box">
                                                <!-- <input id="commodityChannelId" type="hidden" value="2">
            <input id="commodityArticleId" type="hidden" value="98">
            <input id="commodityGoodsId" type="hidden" value="0">
            <input id="commoditySelectNum" type="text" maxlength="9" value="1" maxvalue="10" onkeydown="return checkNumber(event);">
            <a class="add" onclick="addCartNum(1);">+</a>
            <a class="remove" onclick="addCartNum(-1);">-</a>    @change="handleVal"-->
                                                <el-input-number v-model="valueNum" :min="1" :max="infolist.goodsinfo.stock_quantity"></el-input-number>
                                            </div>
                                            <span class="stock-txt">
                                                库存
                                                <em id="commodityStockNum">{{infolist.goodsinfo.stock_quantity}}</em>件
                                            </span>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dd>
                                            <div class="btn-buy" id="buyButton">
                                                <button class="buy">立即购买</button>
                                                <button class="add" @click='addcar'>加入购物车</button>
                                            </div>
                                        </dd>
                                    </dl>
                                </div>

                            </div>
                            <!--/商品信息-->
                        </div>

                        <div id="goodsTabs" class="goods-tab bg-wrap">
                            <!--选项卡-->
                            <Affix :offset-top="20">
                                <div id="tabHead" class="tab-head" style="position: static; top: 517px; width: 925px;">
                                    <ul>
                                        <li>
                                            <a v-bind="{class:isshow?'selected':''}" href="javascript:;" @click='isshowClick(true)'>商品介绍</a>
                                        </li>
                                        <li>
                                            <a v-bind="{class:!isshow?'selected':''}" href="javascript:;" @click='isshowClick(false)' class="">商品评论</a>
                                        </li>
                                    </ul>
                                </div>
                            </Affix>
                            <!--/选项卡-->

                            <!--选项内容-->
                            <div class="tab-content entry" v-if='isshow' v-html='texContent'>
                                <!-- 商品内容 -->
                            </div>

                            <div class="tab-content" v-if='!isshow'>
                                <!--网友评论-->
                                <div class="comment-box">
                                    <!--取得评论总数-->
                                    <form id="commentForm" name="commentForm" class="form-box" url="/tools/submit_ajax.ashx?action=comment_add&amp;channel_id=2&amp;article_id=98">
                                        <div class="avatar-box">
                                            <i class="iconfont icon-user-full"></i>
                                        </div>
                                        <div class="conn-box">
                                            <div class="editor">
                                                <textarea id="txtContent" name="txtContent" sucmsg=" " v-model='pagecontent' datatype="*10-1000" nullmsg="请填写评论内容！"></textarea>
                                                <span class="Validform_checktip"></span>
                                            </div>
                                            <div class="subcon">
                                                <input id="btnSubmit" type="button" @click='submitpage' value="提交评论" class="submit">
                                                <span class="Validform_checktip"></span>
                                            </div>
                                        </div>
                                    </form>
                                    <ul id="commentList" class="list-box">

                                        <p v-if='pagelist.length<=0' style="margin:5px 0 15px 69px;line-height:42px;text-align:center;border:1px solid #f7f7f7;">暂无评论，快来抢沙发吧！</p>

                                        <!-- 评论列表 -->
                                        <li v-for="item in pagelist" :key='item.id'>
                                            <div class="avatar-box">
                                                <i class="iconfont icon-user-full"></i>
                                            </div>
                                            <div class="inner-box">
                                                <div class="info">
                                                    <span v-text='item.user_name'></span>
                                                    <span>{{item.add_time | timefil('YY-MM-DD HH:mm:ss')}}</span>
                                                </div>
                                                <p>{{item.content}}</p>
                                            </div>
                                        </li>

                                    </ul>
                                    <!--放置页码-->
                                    <div class="page-box" style="margin:5px 0 0 62px">
                                        <div id="pagination" class="digg">
                                            <!-- 分页功能 -->
                                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageindex" :page-sizes="[1,5,10, 20, 30, 40]"
                                                :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalcount">
                                            </el-pagination>
                                            <!-- 分页功能/ -->
                                        </div>
                                    </div>
                                    <!--/放置页码-->
                                </div>

                                <!--/网友评论-->
                            </div>

                        </div>

                    </div>
                    <!--/页面左边-->

                    <!--页面右边-->
                    <div class="left-220">
                        <div class="bg-wrap nobg">
                            <div class="sidebar-box">
                                <h4>推荐商品</h4>
                                <ul class="side-img-list">

                                    <li v-for='items in infolist.hotgoodslist' :key='items.id'>
                                        <div class="img-box">
                                            <router-link v-bind="{to:'/site/goodsinfo/'+items.id}">
                                                <img :src="items.img_url">
                                            </router-link>
                                        </div>
                                        <div class="txt-box">
                                            <router-link v-bind="{to:'/site/goodsinfo/'+items.id}">{{items.title}}</router-link>
                                            <span>{{items.add_time | timefil('YY-MM-DD')}}</span>
                                        </div>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--/页面右边-->
                </div>
            </div>
        </div>

        <!-- 商品详情页面/ -->

    </div>
</template>

<script>
    // 按需使用iview 的vue 组件
    import Affix from 'iview/src/components/affix';

    // 放大镜,对应的jq插件
    import '../../../../statics/site/js/jqplugins/imgzoom/magnifier.js';

    // 导入kits帮助类的vm.js组件
    import {
        vm,
        key
    } from '../kits/vm.js';

    // 导入local本地帮助类
    import {
        setItem,
        getItem
    } from '../kits/localStrone.js';



    export default {
        components: { //使用iview组件
            Affix: Affix,
        },
        watch: {
            // 监听url参数的变化,如果有变化,就会触发,监听的是$route
            '$route': function() {
                // console.log(111111);
                this.goodsID = this.$route.params.infoID;
                this.getinfo();
            }
        },
        data() {
            return {
                goodsID: this.$route.params.infoID, //存储从地址栏获取下来的参数
                infolist: {}, //存储具体商品详细信息
                texContent: '', //具体详情内容
                isshow: true, //做商品介绍 商品评论 切换
                pagelist: [], //存评论信息
                pageindex: 1, //当前页
                pageSize: 5, //一页显示10条数据
                totalcount: 0, //总条数
                pagecontent: '', //评论输入框
                valueNum: 1, //购物车加减的默认值
                carobj: {}, //存储商品ID,和购买数量,  {商品id:购买数量};
                goodsinfo: {}, //goodsinfo:{gid:88,bcount:1}   方便用来localStorage操作
            }
        },
        created() {
            this.getinfo();
            this.getartdetial();
            this.getpage();
        },
        methods: {
            //点击加入购物 车
            addcar() {
                //   goodsinfo:{gid:88,bcount:1}
                this.goodsinfo = {
                    "gid": this.goodsID,
                    "bcount": this.valueNum
                };

                setItem(this.goodsinfo); //存本地浏览器中

                // this.carobj[this.goodsID] = this.valueNum;
                // 触发组件 A 中的事件
                vm.$emit(key, getItem());

            },
            // 提交评论
            submitpage() {
                if (this.pagecontent.length <= 0) {
                    this.$message.error('评论信息不不能为空');
                    return false;
                }
                var url = '/site/validate/comment/post/goods/' + this.goodsID;
                this.$http.post(url, {
                    commenttxt: this.pagecontent
                }).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    // 成功
                    // 清空输入框信息
                    this.pagecontent = '';
                    // 成功调用显示评论方法
                    this.getpage();
                })
            },
            // 分页容量触发
            handleSizeChange(val) {
                // console.log(val);
                this.pageSize = val;
                // 再调用获取评论事件
                this.getpage();
            },
            // 分页点击具体分页触发
            handleCurrentChange(val) {
                this.pageindex = val;
                // 再调用获取评论事件
                this.getpage();
            },
            // 评论数据获取
            getpage() {
                var url = '/site/comment/getbypage/goods/' + this.goodsID + '?pageIndex=' + this.pageindex +
                    '&pageSize=' + this.pageSize + '';
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    // 成功
                    this.pagelist = res.data.message;
                    this.totalcount = res.data.totalcount; //总条数
                })
            },
            // 商品介绍  评论切换
            isshowClick(tf) {
                this.isshow = tf;
            },
            // 获取详细内容信息
            getartdetial() {
                var url = '/site/article/getartdetial/goods/' + this.goodsID;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    };
                    // 成功
                    this.texContent = res.data.message.artinfo.content;
                    // console.log(this.texContent);

                })
            },
            // 获取具体商品顶部的详情
            getinfo() {
                var url = '/site/goods/getgoodsinfo/' + this.goodsID;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    // 成功
                    this.infolist = res.data.message;

                    // 图片数据回来,并且等dom生成后,放大镜才工作,不然会有隐形的bug,所以给定时器,100毫秒即可
                    setTimeout(() => {
                        $('#magnifier1').imgzoon({
                            magnifier: '#magnifier1'
                        });
                    }, 100);
                    // console.log(this.infolist);
                })
            },
        }
    }
</script>
<style scoped>
    /* 放大镜,对应的css */
    
    @import url('../../../../statics/site/js/jqplugins/imgzoom/css/magnifier.css');
</style>